<template>
	<view class="zoom-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
		<web-view :src="urls"></web-view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				urls: `http://admin.myonewow.com/zuZhiJianGou?token=${uni.getStorageSync('token')}`,
				touchStartDistance: 0,
				zoomScale: 1
			}
		},
		methods: {
			onTouchStart(event) {
				if (event.touches.length === 2) {
					const x1 = event.touches[0].clientX;
					const y1 = event.touches[0].clientY;
					const x2 = event.touches[1].clientX;
					const y2 = event.touches[1].clientY;

					// 计算初始两指间距离
					this.touchStartDistance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
				}
			},
			onTouchMove(event) {
				if (event.touches.length === 2) {
					const x1 = event.touches[0].clientX;
					const y1 = event.touches[0].clientY;
					const x2 = event.touches[1].clientX;
					const y2 = event.touches[1].clientY;

					// 计算当前两指间距离
					const currentDistance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);

					// 计算缩放比例
					const scale = currentDistance / this.touchStartDistance;

					// 更新页面缩放比例
					this.zoomScale = scale;

					// 更新页面缩放样式
					this.updateZoomStyle();
				}
			},
			onTouchEnd(event) {
				// 清除缩放状态
				this.touchStartDistance = 0;
			},
			updateZoomStyle() {
				// 更新页面的缩放样式
				const zoomContainer = this.$refs.zoomContainer;
				zoomContainer.style.transform = `scale(${this.zoomScale})`;
			}
		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #F0F0F0;
		transform-origin: 0 0;
	}

	.zoom-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		transform-origin: 0 0;
	}
</style>